<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入用户ID">
        <button id="btn">提交</button>
    </form>
    <script>
        // // 阻止浏览器默认事件有两种方法：1.e.preventDefault() 2.return false

        // const oForm = document.querySelector('form')
        // const oint = document.querySelector('input')
        // // 给表单添加一个提交事件
        // oForm.onsubmit = function(){
        //    const ouserID = oint.value  
        //     // ajax请求
        //     // 1.创建 Ajax对象
        //     const xhr = new XMLHttpRequest()
        //     // 2.使用open方法 确定获取方式 地址 是否异步
        //     xhr.open('GET',`/userInfo?userID=${ouserID}&time=${Date.now()}`,true)  //解决缓存问题 利用 
        //     xhr.send()
        //     xhr.onreadystatechange= function(){
        //         if(xhr.readyState === 4 && xhr.status>=200 && xhr.status<=299){ //当请求状态码=4 并且 200<=响应状态码<=299
                    
        //             const result = JSON.parse(xhr.responseText)
        //             console.log(result);
        //         }
        //     }
        //     return false;//阻止提交刷新
        // }


            const btn  = document.querySelector('#btn')
            const int = document.querySelector('input')
            btn.onclick = function(e){
                e.preventDefault(); // 阻止浏览器默认行为
                const msg = int.value;
                const xhr = new XMLHttpRequest()
                xhr.open('GET',`/user?userID=${msg}&_=${Date.now()}`,true)
                xhr.send()
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4 && xhr.status>=200 && xhr.status<=299){
                       const data = JSON.parse(xhr.responseText)
                       console.log(data);
                    }
                }
            }




    </script>
</body>
</html>